<template>
  <div class="relative min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-50 to-purple-50">
    <!-- 背景装饰（复用原有样式） -->
    <div class="absolute inset-0 overflow-hidden">
      <div class="absolute top-1/4 left-1/5 w-40 h-40 border-2 border-blue-200 rounded-full opacity-30 rotate-animation"></div>
      <div class="absolute bottom-1/3 right-1/4 w-60 h-60 border border-purple-200 rounded-full opacity-20 rotate-animation animation-delay-1000"></div>
      <div class="absolute top-1/2 right-1/5 w-20 h-20 border-2 border-cyan-200 rounded-lg opacity-40 float-animation"></div>
      <div class="absolute top-20 right-20 opacity-40 pulse-animation">
        <div class="flex gap-1">
          <div class="w-2 h-2 rounded-full bg-blue-400"></div>
          <div class="w-2 h-2 rounded-full bg-blue-400 opacity-50"></div>
          <div class="w-2 h-2 rounded-full bg-blue-400"></div>
        </div>
        <div class="flex gap-1 mt-1">
          <div class="w-2 h-2 rounded-full bg-blue-400 opacity-50"></div>
          <div class="w-2 h-2 rounded-full bg-blue-400"></div>
          <div class="w-2 h-2 rounded-full bg-blue-400 opacity-50"></div>
        </div>
      </div>
      <div class="absolute bottom-20 left-20 opacity-30 float-animation animation-delay-1500">
        <i class="fa fa-wifi text-3xl text-cyan-500"></i>
      </div>
      <div class="absolute top-1/3 right-1/3 opacity-25 pulse-animation animation-delay-500">
        <i class="fa fa-code text-2xl text-purple-500"></i>
      </div>
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-300 to-purple-300 opacity-50"></div>
      <div class="absolute bottom-0 right-0 w-1 h-full bg-gradient-to-b from-cyan-300 to-blue-300 opacity-50"></div>
    </div>

    <!-- 主卡片（复用原有样式，根据内容适配） -->
    <div
      class="bg-white rounded-2xl shadow-lg shadow-blue-100 p-8 md:p-10 w-full max-w-lg space-y-6 z-10 transform transition-all duration-300 hover:shadow-xl hover:shadow-blue-200/50"
    >
      <!-- 标题区域（根据视图动态切换） -->
      <div class="text-center" v-if="currentView !== 'resetPassword'">
        <div class="inline-block p-3 rounded-full bg-blue-100 mb-4 float-animation">
          <i class="fa fa-lightbulb text-3xl text-blue-500"></i>
        </div>
        <h1 class="text-3xl font-bold text-gray-800 tracking-tight">
          AI<span class="text-blue-500">海龟汤</span>
        </h1>
        <p class="text-gray-500 text-sm mt-2">
          {{
            currentView === 'login'
              ? '解开谜题，享受推理的乐趣'
              : currentView === 'register'
              ? '创建账号，开始探索之旅'
              : '找回密码，重新进入海龟世界'
          }}
        </p>
      </div>

      <!-- 重设密码页面标题（新增） -->
      <div class="text-center" v-if="currentView === 'resetPassword'">
        <div class="inline-block p-3 rounded-full bg-green-100 mb-4 float-animation">
          <i class="fa fa-key text-3xl text-green-500"></i>
          <!-- 图标改为钥匙，颜色换为绿色表示验证通过 -->
        </div>
        <h1 class="text-3xl font-bold text-gray-800 tracking-tight">
          重设密码
        </h1>
        <p class="text-gray-500 text-sm mt-2">
          请设置新密码，确保账号安全
        </p>
      </div>

      <!-- 表单容器 -->
      <div class="space-y-5">
        <!-- 登录表单（原有不变） -->
        <form
          v-if="currentView === 'login'"
          @submit.prevent="handleLogin"
          class="space-y-5"
        >
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">账号</label>
            <div class="relative">
              <i class="fa fa-user absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="loginForm.username"
                type="text"
                placeholder="请输入账号"
                required
                class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
              />
            </div>
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">密码</label>
            <div class="relative">
              <i class="fa fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="loginForm.password"
                :type="showPassword ? 'text' : 'password'"
                placeholder="请输入密码"
                required
                class="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
              />
              <button
                type="button"
                @click="showPassword = !showPassword"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-500 transition-colors"
                aria-label="显示/隐藏密码"
              >
                <i :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" class="fa"></i>
              </button>
            </div>
          </div>
          <div v-if="errorMessage" class="text-sm text-red-500 text-center py-2 px-3 bg-red-50 rounded-xl animate-shake">{{ errorMessage }}</div>
          <button
            type="submit"
            class="w-full bg-gradient-to-r from-blue-400 to-blue-600 text-white font-medium py-3.5 rounded-xl shadow-md hover:shadow-lg hover:from-blue-500 hover:to-blue-700 transition-all transform hover:-translate-y-0.5 active:translate-y-0"
          >登录</button>
          <div class="flex flex-col sm:flex-row justify-center gap-3 text-sm pt-2">
            <a @click.prevent="switchView('register')" class="text-blue-500 hover:text-blue-700 cursor-pointer transition-colors py-1">注册账号</a>
            <span class="hidden sm:inline text-gray-300">|</span>
            <a @click.prevent="switchView('forgot')" class="text-blue-500 hover:text-blue-700 cursor-pointer transition-colors py-1">忘记密码?</a>
          </div>
        </form>

        <!-- 注册表单（原有不变） -->
        <form
          v-if="currentView === 'register'"
          @submit.prevent="handleRegister"
          class="space-y-5"
        >
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">账号</label>
            <div class="relative">
              <i class="fa fa-user-plus absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="registerForm.username"
                type="text"
                placeholder="请创建账号（6-20位字母/数字）"
                required
                minlength="6"
                maxlength="20"
                class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
              />
            </div>
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">邮箱</label>
            <div class="relative">
              <i class="fa fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="registerForm.email"
                type="email"
                placeholder="请输入用于接收验证码的邮箱"
                required
                class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
                :disabled="isSending"  
              />
            </div>
            <p v-if="emailFormatError" class="text-xs text-red-500 mt-1">{{ emailFormatError }}</p>
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">邮箱验证码</label>
            <div class="flex gap-3 items-center">
              <div class="relative flex-1">
                <i class="fa fa-shield absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                <input
                  v-model="registerForm.emailCode"
                  type="text"
                  placeholder="请输入6位验证码"
                  required
                  minlength="6"
                  maxlength="6"
                  pattern="\d{6}"
                  class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
                  :disabled="isSending && countdown > 0"
                />
              </div>
              <button
                type="button"
                @click="sendEmailCode"
                :disabled="isSending || countdown > 0 || !registerForm.email"
                class="px-4 py-3 rounded-xl text-sm font-medium transition-colors"
                :class="{
                  'bg-blue-500 text-white hover:bg-blue-600': !isSending && countdown === 0,
                  'bg-gray-300 text-gray-500 cursor-not-allowed': isSending || countdown > 0
                }"
              >
                <i v-if="isSending" class="fa fa-spinner fa-spin mr-1"></i>
                {{
                  isSending ? '发送中...' :
                  countdown > 0 ? `重新发送(${countdown}s)` :
                  '发送验证码'
                }}
              </button>
            </div>
            <p v-if="emailCodeTip" class="text-xs mt-1" :class="emailCodeTipType === 'success' ? 'text-green-500' : 'text-red-500'">
              {{ emailCodeTip }}
            </p>
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">密码</label>
            <div class="relative">
              <i class="fa fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="registerForm.password"
                :type="showRegPassword ? 'text' : 'password'"
                placeholder="请设置密码（至少6位，含字母和数字）"
                required
                minlength="6"
                class="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
              />
              <button
                type="button"
                @click="showRegPassword = !showRegPassword"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-500 transition-colors"
                aria-label="显示/隐藏密码"
              >
                <i :class="showRegPassword ? 'fa-eye-slash' : 'fa-eye'" class="fa"></i>
              </button>
            </div>
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">确认密码</label>
            <div class="relative">
              <i class="fa fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="registerForm.confirmPassword"
                :type="showRegPassword ? 'text' : 'password'"
                placeholder="请再次输入密码"
                required
                minlength="6"
                class="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
              />
            </div>
          </div>
          <div v-if="regErrorMessage" class="text-sm text-red-500 text-center py-2 px-3 bg-red-50 rounded-xl animate-shake">{{ regErrorMessage }}</div>
          <button
            type="submit"
            class="w-full bg-gradient-to-r from-blue-400 to-blue-600 text-white font-medium py-3.5 rounded-xl shadow-md hover:shadow-lg hover:from-blue-500 hover:to-blue-700 transition-all transform hover:-translate-y-0.5 active:translate-y-0"
          >注册</button>
          <div class="flex justify-center text-sm pt-2">
            <a @click.prevent="switchView('login')" class="text-blue-500 hover:text-blue-700 cursor-pointer transition-colors py-1">已有账号? 登录</a>
          </div>
        </form>

        <!-- 找回密码表单（原有不变） -->
        <form
          v-if="currentView === 'forgot'"
          @submit.prevent="handleForgotPassword"
          class="space-y-5"
        >
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">邮箱</label>
            <div class="relative">
              <i class="fa fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="forgotForm.email"
                type="email"
                placeholder="请输入注册的邮箱"
                required
                class="w-full pl-10 pr-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
              />
            </div>
          </div>
          <div v-if="forgotErrorMessage" class="text-sm text-red-500 text-center py-2 px-3 bg-red-50 rounded-xl animate-shake">{{ forgotErrorMessage }}</div>
          <div v-if="forgotSuccess" class="text-sm text-green-500 text-center py-2 px-3 bg-green-50 rounded-xl">
            重置密码链接已发送到您的邮箱，请查收<br/>
            <span class="text-blue-500 cursor-pointer hover:underline" @click="switchView('resetPassword')">点击此处模拟跳转重置页面</span>
            <!-- 新增：模拟邮箱链接跳转，实际项目中通过后端链接带token进入 -->
          </div>
          <button
            type="submit"
            class="w-full bg-gradient-to-r from-blue-400 to-blue-600 text-white font-medium py-3.5 rounded-xl shadow-md hover:shadow-lg hover:from-blue-500 hover:to-blue-700 transition-all transform hover:-translate-y-0.5 active:translate-y-0"
          >发送重置链接</button>
          <div class="flex justify-center text-sm pt-2">
            <a @click.prevent="switchView('login')" class="text-blue-500 hover:text-blue-700 cursor-pointer transition-colors py-1">返回登录</a>
          </div>
        </form>

        <!-- 新增：重设密码表单 -->
        <form
          v-if="currentView === 'resetPassword'"
          @submit.prevent="handleResetPassword"
          class="space-y-5"
        >
          <!-- 新密码输入 -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">新密码</label>
            <div class="relative">
              <i class="fa fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="resetForm.newPassword"
                :type="showResetPassword ? 'text' : 'password'"
                placeholder="请设置新密码（至少6位，含字母和数字）"
                required
                minlength="6"
                class="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
                @input="checkPasswordStrength"
                
              />
              <button
                type="button"
                @click="showResetPassword = !showResetPassword"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-500 transition-colors"
                aria-label="显示/隐藏密码"
              >
                <i :class="showResetPassword ? 'fa-eye-slash' : 'fa-eye'" class="fa"></i>
              </button>
            </div>
            <!-- 密码强度提示（新增） -->
            <div class="mt-2 space-y-1">
              <div class="flex justify-between text-xs text-gray-500">
                <span>密码强度</span>
                <span>{{ passwordStrengthText }}</span>
              </div>
              <div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
                <div
                  class="h-full rounded-full transition-all duration-300"
                  :class="passwordStrengthClass"
                  :style="{ width: passwordStrengthWidth }"
                ></div>
              </div>
            </div>
          </div>

          <!-- 确认新密码 -->
          <div>
            <label class="block text-sm font-semibold text-gray-700 mb-2">确认新密码</label>
            <div class="relative">
              <i class="fa fa-lock absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
              <input
                v-model="resetForm.confirmNewPassword"
                :type="showResetPassword ? 'text' : 'password'"
                placeholder="请再次输入新密码"
                required
                minlength="6"
                class="w-full pl-10 pr-10 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"
              />
            </div>
            <!-- 两次密码不一致提示（新增） -->
            <p v-if="resetForm.newPassword && resetForm.confirmNewPassword && resetForm.newPassword !== resetForm.confirmNewPassword" class="text-xs text-red-500 mt-1">
              两次密码输入不一致
            </p>
          </div>

          <!-- 重置结果提示 -->
          <div v-if="resetErrorMessage" class="text-sm text-red-500 text-center py-2 px-3 bg-red-50 rounded-xl animate-shake">{{ resetErrorMessage }}</div>
          <div v-if="resetSuccess" class="text-sm text-green-500 text-center py-2 px-3 bg-green-50 rounded-xl">
            <i class="fa fa-check-circle mr-1"></i> 密码重置成功！即将返回登录页...
          </div>

          <!-- 提交按钮 -->
          <button
            type="submit"
            class="w-full bg-gradient-to-r from-green-400 to-green-600 text-white font-medium py-3.5 rounded-xl shadow-md hover:shadow-lg hover:from-green-500 hover:to-green-700 transition-all transform hover:-translate-y-0.5 active:translate-y-0"
            :disabled="resetSuccess || isResetting"
         
          >
            <i v-if="isResetting" class="fa fa-spinner fa-spin mr-1"></i>
            {{ isResetting ? '重置中...' : '确认重置' }}
          </button>

          <!-- 返回登录按钮 -->
          <div class="flex justify-center text-sm pt-2">
            <a @click.prevent="switchView('login')" class="text-blue-500 hover:text-blue-700 cursor-pointer transition-colors py-1">
              <i class="fa fa-arrow-left mr-1"></i> 返回登录
            </a>
          </div>
        </form>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="absolute bottom-4 w-full text-center text-gray-500 text-sm">
      ©2025 AI海龟汤 - 享受推理的乐趣
    </footer>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      currentView: 'login',
      // 原有表单数据
      loginForm: { username: '', password: '' },
      registerForm: { username: '', email: '', emailCode: '', password: '', confirmPassword: '' },
      forgotForm: { email: '' },
      // 新增：重置密码表单数据
      resetForm: { newPassword: '', confirmNewPassword: '' },
      // 密码显示状态
      showPassword: false,
      showRegPassword: false,
      showResetPassword: false, // 新增：重置密码显示状态
      // 错误/成功提示
      errorMessage: '',
      regErrorMessage: '',
      forgotErrorMessage: '',
      forgotSuccess: false,
      resetErrorMessage: '', // 新增：重置密码错误提示
      resetSuccess: false,   // 新增：重置密码成功提示
      isResetting: false,    // 新增：重置密码加载状态
      // 邮箱验证码状态（原有不变）
      isSending: false,
      countdown: 0,
      timer: null,
      correctEmailCode: '',
      emailFormatError: '',
      emailCodeTip: '',
      emailCodeTipType: '',
      // 新增：密码强度相关
      passwordStrength: 0, // 0-3：弱/中/强/极强
      passwordStrengthText: '未输入',
      passwordStrengthClass: 'bg-gray-300',
      passwordStrengthWidth: '0%'
    }
  },
  methods: {
    // 切换视图（新增'resetPassword'选项）
    switchView(view) {
      console.log('切换到视图:', view);
      // 清空所有提示
      this.errorMessage = '';
      this.regErrorMessage = '';
      this.forgotErrorMessage = '';
      this.resetErrorMessage = ''; // 新增：清空重置错误
      this.emailFormatError = '';
      this.emailCodeTip = '';
      this.forgotSuccess = false;
      this.resetSuccess = false;   // 新增：清空重置成功
      this.isResetting = false;    // 新增：重置加载状态
      // 重置表单数据
      if (view !== 'resetPassword') {
        this.resetForm = { newPassword: '', confirmNewPassword: '' };
        this.passwordStrength = 0; // 重置密码强度
      }
      this.currentView = view;
      // 切换视图时重置验证码状态
      this.resetEmailCodeState();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },

    // 原有方法不变：handleLogin、handleRegister、handleForgotPassword、sendEmailCode、checkEmailFormat、hideEmailMiddle、startCountdown、resetEmailCodeState
    handleLogin() {
      if (!this.loginForm.username || !this.loginForm.password) {
        this.errorMessage = '请输入账号和密码';
        return;
      }
      this.errorMessage = '';
      // 登录成功后
      localStorage.setItem('token', 'your_token')
      const redirect = this.$route.query.redirect || '/'
      this.$router.push(redirect)
    },
    handleRegister() {
      this.regErrorMessage = '';
      this.emailCodeTip = '';
      if (!this.registerForm.username || !this.registerForm.email || !this.registerForm.emailCode || !this.registerForm.password) {
        this.regErrorMessage = '请填写完整注册信息';
        return;
      }
      if (!this.checkEmailFormat(this.registerForm.email)) {
        this.emailFormatError = '请输入正确的邮箱格式';
        return;
      }
      if (this.registerForm.password.length < 6) {
        this.regErrorMessage = '密码长度至少6位';
        return;
      }
      if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/.test(this.registerForm.password)) {
        this.regErrorMessage = '密码需包含字母和数字';
        return;
      }
      if (this.registerForm.password !== this.registerForm.confirmPassword) {
        this.regErrorMessage = '两次密码输入不一致';
        return;
      }
      if (this.registerForm.emailCode !== this.correctEmailCode) {
        this.emailCodeTip = '验证码输入错误，请重新获取';
        this.emailCodeTipType = 'error';
        return;
      }
      this.regErrorMessage = '';
      alert('注册成功！即将跳转到登录页');
      this.switchView('login');
    },
    handleForgotPassword() {
      if (!this.forgotForm.email) {
        this.forgotErrorMessage = '请输入邮箱';
        return;
      }
      this.forgotErrorMessage = '';
      this.forgotSuccess = true;
      alert('找回密码链接已发送，实际项目中这里会调用发送接口');
    },
    sendEmailCode() {
      this.emailFormatError = '';
      this.emailCodeTip = '';
      if (!this.checkEmailFormat(this.registerForm.email)) {
        this.emailFormatError = '请输入正确的邮箱格式';
        return;
      }
      this.isSending = true;
      this.emailCodeTip = '正在发送验证码，请稍后...';
      this.emailCodeTipType = 'success';
      setTimeout(() => {
        const code = Math.floor(100000 + Math.random() * 900000).toString();
        this.correctEmailCode = code;
        const isSuccess = true;
        if (isSuccess) {
          this.emailCodeTip = `验证码已发送至 ${this.hideEmailMiddle(this.registerForm.email)}，5分钟内有效`;
          this.emailCodeTipType = 'success';
          this.startCountdown();
        } else {
          this.emailCodeTip = '验证码发送失败，请稍后重试';
          this.emailCodeTipType = 'error';
        }
        this.isSending = false;
      }, 1500);
    },
    checkEmailFormat(email) {
      const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      return reg.test(email);
    },
    hideEmailMiddle(email) {
      const [prefix, suffix] = email.split('@');
      if (prefix.length <= 3) {
        return prefix + '****@' + suffix;
      }
      return prefix.slice(0, 3) + '****@' + suffix;
    },
    startCountdown() {
      this.countdown = 60;
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.timer = null;
          this.emailCodeTip = '';
        }
      }, 1000);
    },
    resetEmailCodeState() {
      this.isSending = false;
      this.countdown = 0;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.correctEmailCode = '';
      this.emailCodeTip = '';
      this.registerForm.emailCode = '';
    },

    // 新增：检测密码强度
    checkPasswordStrength() {
      const password = this.resetForm.newPassword;
      if (!password) {
        this.passwordStrength = 0;
        this.passwordStrengthText = '未输入';
        this.passwordStrengthClass = 'bg-gray-300';
        this.passwordStrengthWidth = '0%';
        return;
      }

      // 简单的密码强度算法（可根据需求优化）
      let strength = 0;
      // 长度>=6
      if (password.length >= 6) strength++;
      // 包含字母和数字
      if (/^(?=.*[A-Za-z])(?=.*\d)/.test(password)) strength++;
      // 包含特殊字符
      if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength++;
      // 长度>=10
      if (password.length >= 10) strength++;

      // 更新强度状态
      this.passwordStrength = strength;
      switch (strength) {
        case 0:
          this.passwordStrengthText = '未输入';
          this.passwordStrengthClass = 'bg-gray-300';
          this.passwordStrengthWidth = '0%';
          break;
        case 1:
          this.passwordStrengthText = '弱';
          this.passwordStrengthClass = 'bg-red-400';
          this.passwordStrengthWidth = '25%';
          break;
        case 2:
          this.passwordStrengthText = '中';
          this.passwordStrengthClass = 'bg-yellow-400';
          this.passwordStrengthWidth = '50%';
          break;
        case 3:
          this.passwordStrengthText = '强';
          this.passwordStrengthClass = 'bg-green-400';
          this.passwordStrengthWidth = '75%';
          break;
        case 4:
          this.passwordStrengthText = '极强';
          this.passwordStrengthClass = 'bg-green-600';
          this.passwordStrengthWidth = '100%';
          break;
      }
    },

    // 新增：处理密码重置
    handleResetPassword() {
      // 清空提示
      this.resetErrorMessage = '';
      this.resetSuccess = false;

      // 1. 表单验证
      if (!this.resetForm.newPassword || !this.resetForm.confirmNewPassword) {
        this.resetErrorMessage = '请填写完整密码信息';
        return;
      }
      if (this.resetForm.newPassword.length < 6) {
        this.resetErrorMessage = '密码长度至少6位';
        return;
      }
      if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/.test(this.resetForm.newPassword)) {
        this.resetErrorMessage = '密码需包含字母和数字';
        return;
      }
      if (this.resetForm.newPassword !== this.resetForm.confirmNewPassword) {
        this.resetErrorMessage = '两次密码输入不一致';
        return;
      }

      // 2. 模拟重置请求（实际项目中需传递token和新密码到后端）
      this.isResetting = true;
      setTimeout(() => {
        // 模拟接口成功
        this.isResetting = false;
        this.resetSuccess = true;
        // 3秒后跳回登录页
        setTimeout(() => {
          this.switchView('login');
        }, 3000);
      }, 1500);
    }
  },

  // 新增：页面挂载时验证重置令牌（实际项目中从路由参数获取token并验证）
  mounted() {
    if (this.currentView === 'resetPassword') {
      // 模拟token验证（实际项目中调用后端接口）
      const resetToken = this.$route.query.token; // 假设从路由获取token
      if (!resetToken) {
        this.resetErrorMessage = '重置链接无效或已过期，请重新申请';
        // 3秒后跳回找回密码页
        setTimeout(() => {
          this.switchView('forgot');
        }, 3000);
      }
    }
  },

  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style scoped>
/* 原有样式不变 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@keyframes rotate-animation {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(360deg) scale(1.05); }
}
@keyframes pulse-animation {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}
.float-animation { animation: float 6s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.rotate-animation { animation: rotate-animation 25s linear infinite; }
.pulse-animation { animation: pulse-animation 3s ease-in-out infinite; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-1500 { animation-delay: 1.5s; }
</style>